/**
 * @description 秒杀商品Item
 */
import React from 'react';
import classnames from "classnames";
import "./styles/App.less";
import { Button, Toast } from 'wd-mobile';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div className={classnames("xseckill-goodsItem")} onClick={() => {
        location.href = `./goods.html#/Detail/${this.props.data.id}`;
      }}>
        <div className={"xseckill-goodsItem-img"}>
          <div className={classnames("xseckill-goodsItem-img-container", "wdskeleton-translate")} style={{ backgroundImage: `url(${this.props.data.goodsIcon})` }}></div>
          {
            this.props.data.stockNum <= 0 && <div className={"xseckill-goodsItem-soldOut"}><div>售罄</div></div>
          }
          {
            this.props.data.stockNum <= 10 && this.props.data.stockNum > 0 && <div className={"xseckill-goodsItem-willSoldout"}>即将售罄</div>
          }
          {
            this.props.data.isNoob == 1 && <div className={"xseckill-goodsItem-newer"}>首单特价</div>
          }
        </div>
        <div className={"xseckill-goodsItem-info"}>
          <div className={"xseckill-goodsItem-info-name"}><span>{this.props.data.skuName}</span></div>
          <div className={"xseckill-goodsItem-info-bottom"}>
            <div className={"xseckill-goodsItem-info-price"}>
              ￥{this.props.data.price}<span className={"xseckill-goodsItem-info-price-recommendPrice"}>{this.props.data.recommendPrice ? `￥${this.props.data.recommendPrice}` : ""}</span>
            </div>
            <div className={"xseckill-goodsItem-soldInfo"}>

              <span className={classnames("xseckill-goodsItem-soldInfo-stock", {
                "xseckill-goodsItem-soldInfo-stock-gray": this.props.data.stockNum > 10 || this.props.data.stockNum == 0
              })}>
                {
                  this.props.data.stockNum == 0 && "商品售罄"
                }
                {
                  this.props.data.stockNum > 0 && (this.props.data.stockNum <= 10 ? "仅剩" : "剩余")
                }
                {
                  this.props.data.stockNum > 0 && `${this.props.data.stockNum}件`
                }
              </span>
              {/* <span className={"xseckill-goodsItem-soldInfo-soldNum"}>已售{this.props.data.soldNum || 0}件</span> */}
            </div>
          </div>
          <Button className={classnames("xseckill-goodsItem-buy", {
            "xseckill-goodsItem-orderState": this.props.data.stockNum <= 0 || !this.props.data.saleStatus
          })} onClick={(e) => {
            e.stopPropagation();
            if (this.props.data.stockNum <= 0 || !this.props.data.saleStatus) {
              return;
            }
            if (this.props.data.stockNum > 0) {
              location.href = `./goods.html#/Detail/${this.props.data.id}`;
              return;
            }
          }}>{!!this.props.data.saleStatus ? (this.props.data.stockNum > 0 ? "去抢购" : "已抢光") : "未开始"}</Button>
        </div>
      </div>
    );
  }
}

App.defaultProps = {
  // 展示库存
  showStock: true,
};

export default App;
